{% extends 'wancake/base_nav_frame.html' %}
{% load staticfiles %}
{% block content %}
  <div>
    <div class="row">
      <div class="container">
        <ol class="breadcrumb wb-breakcrumb">
          <li><a href="#">资源管理</a> </li>
          <li class="active">添加成员</li>
        </ol>
      </div>
    </div>
    <div class="row">
      <div class="container col-sm-6 col-lg-6 col-md-6 col-xs-6">
        <ul class="nav nav-tabs" id="wb-user-group-nav">
          <li class="active"><a href="#wb-user-admin" data-toggle="tab" data-group-id="{{ admin_group.id }}">{{ admin_group.name }}</a></li>
          <li class=""><a href="#wb-user-cp" data-toggle="tab" data-group-id="{{ cp_group.id }}">{{ cp_group.name }}</a></li>
        </ul>
        <div class="tab-content wb-tab-content">
          <div class="tab-pane active" id="wb-user-admin">
            <form class="form-horizontal" method="post">
              <div class="form-group wb-form-field-group">
                <label for="wb-user-admin-email" class="col-md-offset-1 col-lg-offset-1 col-sm-offset-1 col-xs-offset-1 col-sm-2 col-lg-2 col-md-2 col-xs-2 control-label">账号:</label>
                <div class="col-sm-6 col-lg-6 col-md-6 col-xs-6">
                  <div class="input-group">
                    <input type="text" class="form-control wb-form-control" id="wb-user-admin-email" aria-describedby="wb-user-admin-email-def"
                         placeholder="请输入账号" />
                    <span class="input-group-addon" id="wb-user-admin-email-def">@wanbatv.com</span>
                  </div>
                </div>
                <div class="col-md-1 col-lg-1 col-sm-1 col-xs-1">
                  <span class="glyphicon form-control-feedback" aria-hidden="true" data-rel-field="wb-user-admin-email"></span>
                </div>
              </div>
              <div class="form-group wb-form-field-group">
                <label for="wb-user-admin-password" class="col-md-offset-1 col-lg-offset-1 col-sm-offset-1 col-xs-offset-1 col-sm-2 col-lg-2 col-md-2 col-xs-2 control-label">密码:</label>
                <div class="col-sm-6 col-lg-6 col-md-6 col-xs-6">
                  <input type="password" class="form-control wb-form-control" id="wb-user-admin-password" placeholder="请输入密码" />
                </div>
                <div class="col-md-1 col-lg-1 col-sm-1 col-xs-1">
                  <span class="glyphicon form-control-feedback" aria-hidden="true" data-rel-field="wb-user-admin-password"></span>
                </div>
              </div>
              <div class="form-group wb-form-field-group">
                <label for="wb-user-admin-confirm-password" class="col-md-offset-1 col-lg-offset-1 col-sm-offset-1 col-xs-offset-1 col-sm-2 col-lg-2 col-md-2 col-xs-2 control-label">确认密码:</label>
                <div class="col-sm-6 col-lg-6 col-md-6 col-xs-6">
                  <input type="password" class="form-control wb-form-control" id="wb-user-admin-confirm-password" placeholder="请再次输入密码" />
                </div>
                <div class="col-md-1 col-lg-1 col-sm-1 col-xs-1">
                  <span class="glyphicon form-control-feedback" aria-hidden="true" data-rel-field="wb-user-admin-confirm-password"></span>
                </div>
              </div>

              <div class="form-group">
                <label for="wb-user-admin-first" class="col-md-offset-1 col-lg-offset-1 col-sm-offset-1 col-xs-offset-1 col-sm-2 col-lg-2 col-md-2 col-xs-2 control-label">姓:</label>
                <div class="col-sm-2 col-lg-2 col-md-2 col-xs-2">
                  <input type="text" class="form-control wb-form-control" id="wb-user-admin-first" placeholder="选填" />
                </div>

                <label for="wb-user-admin-last" class="col-sm-1 col-lg-1 col-md-1 col-xs-1 control-label">名:</label>
                <div class="col-sm-3 col-lg-3 col-md-3 col-xs-3">
                  <input type="text" class="form-control wb-form-control" id="wb-user-admin-last" placeholder="选填" />
                </div>
              </div>

              <div class="form-group wb-form-field-group">
                <div class="col-lg-offset-3 col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-sm-6 col-xs-6 col-md-6 col-lg-6">
                  <div class="checkbox">
                      <label>
                        <input type="checkbox" id="wb-user-admin-issuper">是超级管理员？
                      </label>
                  </div>
                </div>
              </div>

              <div class="col-sm-6 col-xs-6 col-md-6 col-lg-6 col-lg-offset-3 col-md-offset-3 col-sm-offset-3 col-xs-offset-3 wb-form-field-button-block">
                <button type="submit" class="btn btn-success btn-block" id="wb-submit-admin-user">创建管理员</button>
                <div class="clearfix"></div>
              </div>
              <input type="hidden" name="group" value="admin" />
              <div class="col-sm-6 col-xs-6 col-md-6 col-lg-6 col-lg-offset-3 col-md-offset-3 col-sm-offset-3 col-xs-offset-3">
                <p id="wb-user-admin-submit-hint"></p>
              </div>
            </form>
          </div>
          <div class="tab-pane" id="wb-user-cp">
            <form class="form-horizontal" method="post">
              <div class="form-group wb-form-field-group">
                <label for="wb-user-cp-account" class="col-md-offset-1 col-lg-offset-1 col-sm-offset-1 col-xs-offset-1 col-sm-2 col-lg-2 col-md-2 col-xs-2 control-label">账号:</label>
                <div class="col-sm-6 col-lg-6 col-md-6 col-xs-6">
                  <input type="text" class="form-control wb-form-control" id="wb-user-cp-account" placeholder="请输入CP的账号" />
                </div>
                <div class="col-md-1 col-lg-1 col-sm-1 col-xs-1">
                  <span class="glyphicon form-control-feedback" aria-hidden="true" data-rel-field="wb-user-cp-account"></span>
                </div>
              </div>
              <div class="form-group wb-form-field-group">
                <label for="wb-user-cp-email" class="col-md-offset-1 col-lg-offset-1 col-sm-offset-1 col-xs-offset-1 col-sm-2 col-lg-2 col-md-2 col-xs-2 control-label">邮箱:</label>
                <div class="col-sm-6 col-lg-6 col-md-6 col-xs-6">
                  <input type="email" class="form-control wb-form-control" id="wb-user-cp-email" placeholder="请输入CP的邮箱" />
                </div>
                <div class="col-md-1 col-lg-1 col-sm-1 col-xs-1">
                  <span class="glyphicon form-control-feedback" aria-hidden="true" data-rel-field="wb-user-cp-email"></span>
                </div>
              </div>
              <div class="form-group wb-form-field-group">
                <label for="wb-user-admin-password" class="col-md-offset-1 col-lg-offset-1 col-sm-offset-1 col-xs-offset-1 col-sm-2 col-lg-2 col-md-2 col-xs-2 control-label">密码:</label>
                <div class="col-sm-6 col-lg-6 col-md-6 col-xs-6">
                  <input type="password" class="form-control wb-form-control" id="wb-user-cp-password" placeholder="请输入密码" />
                </div>
                <div class="col-md-1 col-lg-1 col-sm-1 col-xs-1">
                  <span class="glyphicon form-control-feedback" aria-hidden="true" data-rel-field="wb-user-cp-password"></span>
                </div>
              </div>
              <div class="form-group wb-form-field-group">
                <label for="wb-user-admin-confirm-password" class="col-md-offset-1 col-lg-offset-1 col-sm-offset-1 col-xs-offset-1 col-sm-2 col-lg-2 col-md-2 col-xs-2 control-label">确认密码:</label>
                <div class="col-sm-6 col-lg-6 col-md-6 col-xs-6">
                  <input type="password" class="form-control wb-form-control" id="wb-user-cp-confirm-password" placeholder="请再次输入密码" />
                </div>
                <div class="col-md-1 col-lg-1 col-sm-1 col-xs-1">
                  <span class="glyphicon form-control-feedback" aria-hidden="true" data-rel-field="wb-user-cp-confirm-password"></span>
                </div>
              </div>

              <div class="form-group wb-form-field-group">
                <label for="wb-user-cp-first" class="col-md-offset-1 col-lg-offset-1 col-sm-offset-1 col-xs-offset-1 col-sm-2 col-lg-2 col-md-2 col-xs-2 control-label">姓:</label>
                <div class="col-sm-2 col-lg-2 col-md-2 col-xs-2">
                  <input type="text" class="form-control" id="wb-user-cp-first" placeholder="选填" />
                </div>

                <label for="wb-user-cp-last" class="col-sm-1 col-lg-1 col-md-1 col-xs-1 control-label">名:</label>
                <div class="col-sm-3 col-lg-3 col-md-3 col-xs-3">
                  <input type="text" class="form-control" id="wb-user-cp-last" placeholder="选填" />
                </div>
              </div>

              <div class="form-group wb-form-field-group">
                <label for="wb-user-cp-group" class="col-md-offset-1 col-lg-offset-1 col-sm-offset-1 col-xs-offset-1 col-sm-2 col-lg-2 col-md-2 col-xs-2 control-label">内容商:</label>
                <div class="col-lg-6 col-sm-6 col-md-6 col-xs-6">
                  <select class="form-control" name="wb-user-cp-rules">
                    {% for cp_rule in cp_group.rules %}
                      <option value="{{ cp_rule.id }}">{{ cp_rule.name }}</option>
                    {% endfor %}
                  </select>
                </div>
              </div>

              <input type="hidden" name="group" value="cp" />

              <div class="col-sm-6 col-xs-6 col-md-6 col-lg-6 col-lg-offset-3 col-md-offset-3 col-sm-offset-3 col-xs-offset-3 wb-form-field-button-block">
                <button type="submit" class="btn btn-success btn-block" id="wb-submit-cp-user">创建内容商账号</button>
                <div class="clearfix"></div>
              </div>
            </form>
          </div>
        </div>

      </div>
    </div>
  </div>
{% endblock %}
{% block jsscript %}
  <script type="text/javascript">
    $(document).ready(function(e) {

      var rule_id = -1;

      var filterEmailSuffix = function(email) {
        var end = email.indexOf("@");
        var str = email;
        if (end > 0) {
          str = email.substring(0, end);
        }
        return str;
      };

      $("#wb-user-group-nav").children("li").each(function(index, item) {
        var $li = $(item);
        $li.click(function(e) {
          var $a = $($(this).find("a")[0]);
          var groupId = parseInt($a.data("group-id"));
          switch (groupId) {
            case {{ admin_group.id }}:
              if ($("#wb-user-admin-issuper").checked) {
                rule_id = {{ admin_group.super_admin_id }};
              } else {
                rule_id = {{ admin_group.normal_admin_id }};
              }
              break;
            case {{ cp_group.id }}:
              rule_id = parseInt($("select[name=\"wb-user-cp-rules\"]").val());
              break;
          }
        });
      });

      $(".wb-form-control").blur(function(e) {
        var self = this;
        var tagName = self.localName;
        if (tagName === 'input') {
          var id = $(self).attr("id");
          console.log("#" + id + " val=" + $(self).val());
          if ($(self).val()) {
            var span = $("span[data-rel-field='"+id+"']");
            if (span.hasClass("glyphicon-remove")) {
              span.removeClass("glyphicon-remove");
            }
            span.addClass("glyphicon-ok");
            var parent = span.parent();
            if (parent.hasClass("has-error")) {
              parent.removeClass("has-error");
            }
            parent.addClass("has-success");
          } else {
            var span = $("span[data-rel-field='"+id+"']");
            if (span.hasClass("glyphicon-ok")) {
              span.removeClass("glyphicon-ok");
            }
            span.addClass("glyphicon-remove");
            var parent = span.parent();
            if (parent.hasClass("has-success")) {
              parent.removeClass("has-success");
            }
            parent.addClass("has-error");
          }
        }
      });

      $("#wb-user-admin-issuper").change(function(e) {
        if (this.checked) {
          rule_id = {{ admin_group.super_admin_id }};
        } else {
          rule_id = {{ admin_group.normal_admin_id }};
        }
      });

      $("select[name=\"wb-user-cp-rules\"]").change(function(e) {
        rule_id = $(this).val();
      });

      var getGroupId = function () {
        var groupNav = $("#wb-user-group-nav");
        var lis = $(groupNav).children("li");
        var groupId = -1;
        lis.each(function(index, item) {
          if ($(item).hasClass("active")) {
            var a = $(item).find("a");
            groupId = parseInt($(a).data("group-id"));
            return true;
          }
        });
        return groupId;
      };

      var getRuleId = function () {
        if (rule_id < 0) {
          var groupId = getGroupId();
          if (groupId == {{ admin_group.id }}) {
            rule_id = {{ admin_group.default_rule }};
          } else {
            rule_id = {{ cp_group.default_rule }};
          }
        }
        return rule_id;
      };

      var submitUser = function(userData) {
        if (!userData.groupId) {
          userData.groupid = getGroupId();
        }
        if (!userData.ruleId) {
          userData.ruleid = getRuleId();
        }
        $.ajax("./add/done", {
          data : userData
          , type : "post"
          , dataType : "json"
          , success : function (data) {
            var msg = data.message;
            console.log("result" + JSON.stringify(msg));

          }, error : function () {

          }
        })
      };

      $("#wb-submit-admin-user").click(function(e) {
        e.preventDefault();
        var emailEle = $("#wb-user-admin-email");
        var userData = {
          "account" : emailEle.val()
          , "email" : emailEle.val() + "@wanbatv.com"
          , "password" : $("#wb-user-admin-password").val()
        };
        if ($("#wb-user-admin-first").val()) {
          userData["firstname"] = $("#wb-user-admin-first").val();
        }
        if ($("#wb-user-admin-last").val()) {
          userData["lastname"] = $("#wb-user-admin-last").val();
        }
        submitUser(userData);
      });

      $("#wb-submit-cp-user").click(function(e) {
        e.preventDefault();
        var userData = {
          "account" : $("#wb-user-cp-account").val()
          , "email" : $("#wb-user-cp-email").val()
          , "password" : $("#wb-user-cp-password").val()
        };
        if ($("#wb-user-cp-first").val()) {
          userData["firstname"] = $("#wb-user-cp-first").val();
        }
        if ($("#wb-user-cp-last").val()) {
          userData["lastname"] = $("#wb-user-cp-last").val();
        }
        submitUser(userData)
      });


    });
  </script>
{% endblock %}